<template>
  <div class="managerAuthority">
    <div>
      <el-select v-model="value" class="m-2" placeholder="选择成员岗位" size="large">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="选择">
        <template #default="scope">
          <input type="checkbox" v-model="scope.row.checked" />
        </template>
      </el-table-column>
      <el-table-column label="菜单名称">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="路径">
        <template #default="scope">
          {{ scope.row.path }}
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="sumbit">确定授权</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, watch } from 'vue'
import { menuQuery, menuAdd, typeMenuAdd, typeMenuQuery,alltypeMenuAdd } from '../../services/menuService.ts'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'

interface Menu {
  _id?: string
  name: string
  path: string
  type?: number
  checked: boolean
}

const tableData = ref<Array<Menu>>([]) //控制显示
const value = ref('')
const options = ref<any>([]) //数据源

onMounted(async () => {
  let res = await menuQuery({})
  tableData.value = res.data.manageTeamMenu.map((item: any) => {
    item.checked = false
    return item
  })

  options.value = res.data.manageTypeList.map((item: any) => {
    return { label: item.name, value: item._id }
  })
})


//确定授权
let sumbit = async () => {
  let typeid = value.value
  let checkedList = tableData.value.filter((item) => item.checked)

  if (typeid != '') {
    let res = await alltypeMenuAdd({
      typeid,
      menulist: checkedList
    })
    if (res.data.code == 200) {
      ElMessage('授权成功')
    }
  } else {
    ElMessage('请选择类别')
  }

}

watch([value], async () => {
  let res = await typeMenuQuery({
    typeid: value.value
  })
  let existList = res.data.data
  tableData.value.map((item) => {
    item.checked = false
    if (existList.some((info: any) => info.menuid == item._id)) {
      item.checked = true
    }
    return item
  })
})

</script>

<style lang="scss" scoped>
.managerAuthority {
  margin-top: 10px;
}
</style>
